import { getRecommendApi } from '@/services/pro';
import { PageContainer } from '@ant-design/pro-components';
import { Button, Form, Image, Input, Space, Table } from 'antd';
import { useState } from 'react';

import useList from '@/hooks/useList';

const AccessPage: React.FC = () => {
  const [form] = Form.useForm();
  const [flag, setFlag] = useState(1);

  const {
    count,
    limitNum,
    setCount,
    setlimitNum,
    data,
    loading,
    search,
    setSearch,
    reset,
    onFinish,
  } = useList(getRecommendApi, form, { type: 'isrecommend', flag: flag });

  const columns = [
    {
      title: '产品名称',
      dataIndex: 'proname',
    },
    {
      title: '产品图片',
      dataIndex: 'img1',
      render(text: string) {
        return (
          <Image
            width={100}
            src={text}
            placeholder={<Image preview={false} src={text} />}
          />
        );
      },
    },
    {
      title: '产品分类',
      dataIndex: 'category',
    },
    {
      title: '产品品牌',
      dataIndex: 'brand',
    },
    {
      title: '产品价格',
      dataIndex: 'originprice',
    },
    {
      title: '操作',
      render(text: string, record: any) {
        return (
          <Space>
            <Button>编辑</Button>
            <Button type="primary" danger>
              删除
            </Button>
          </Space>
        );
      },
    },
  ];

  return (
    <PageContainer
      ghost
      header={{
        title: '产品推荐',
      }}
    >
      产品推荐
      <Button onClick={() => setFlag(0)}>btn</Button>
      <Form
        form={form}
        name="horizontal_login"
        layout="inline"
        onFinish={onFinish}
      >
        <Form.Item name="proname" label="产品名称">
          <Input />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            搜索
          </Button>
          <Button type="primary" onClick={reset}>
            重置
          </Button>
        </Form.Item>
      </Form>
      {data && (
        <Table
          dataSource={data.data}
          columns={columns}
          bordered
          rowKey="proid"
          loading={loading}
          pagination={{
            defaultCurrent: count,
            total: data.total,
            onChange: (page, pageSize) => {
              setCount(page || 1);
              setlimitNum(pageSize || 10);
            },
          }}
        />
      )}
    </PageContainer>
  );
};

export default AccessPage;
